<template>
  <nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`">
    <div class="aui-navbar__header">
      <h1 class="aui-navbar__brand" @click="$router.push({ name: 'home-index' })">
        <a class="aui-navbar__brand-lg" href="javascript:;">
			<div class="merquee">
				<span class="merquee-txt" style="padding-right: 20px;">{{name}}</span>
				<span class="merquee-txt" style="padding-right: 20px;">{{name}}</span>
			</div>
		 <!-- <marquee :val="name"></marquee> -->
		</a>
        <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a>
      </h1>
    </div>
    <div class="aui-navbar__body">
      <el-menu class="aui-navbar__menu mr-auto" mode="horizontal">
        <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold" >
          <svg class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--switch" aria-hidden="true" style="color:  #000!important;"><use xlink:href="#icon-outdent"></use></svg>
        </el-menu-item>
        <el-menu-item index="2" @click="refresh()">
          <svg style="color: rgba(0, 0, 0, 1)!important;" class="icon-svg aui-navbar__icon-menu aui-navbar__icon-menu--refresh" aria-hidden="true"><use xlink:href="#icon-sync"></use></svg>
        </el-menu-item>
      </el-menu>
      <!-- 时间戳增加 -->
		<div style="display: flex;">
			<span style="display: block;width: 90px; font-size: 16px;color: #000000; line-height:50px">{{ time1 }}</span> 
			<span style="display: block;width: 70px;font-size: 16px;color: #000000; line-height:50px">{{ time2 }}</span> 
		</div>
      <el-menu class="aui-navbar__menu" mode="horizontal">
        <!-- <el-menu-item index="4" @click="fullscreenHandle()">
          <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"><use xlink:href="#icon-fullscreen"></use></svg>
        </el-menu-item> -->
        <el-menu-item index="5" class="aui-navbar__avatar">
          <el-dropdown placement="bottom" :show-timeout="0">
            <span class="el-dropdown-link">
              <!-- <img src="~@/assets/img/avatar.png"> -->
              <span class="navbar-txt">{{ $store.state.user.name }}</span>
              <i class="el-icon-arrow-down navbar-arrow"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()">{{ $t('updatePassword.title') }}</el-dropdown-item>
              <el-dropdown-item @click.native="version()">关于软件</el-dropdown-item>
			  <el-dropdown-item @click.native="logoutHandle()">{{ $t('logout') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePasswordVisible" ref="updatePassword"></update-password>
	<el-dialog title="关于软件" append-to-body :close-on-click-modal="false" :visible.sync="visible"  width="400px">
	  <div class="about-dialog-main">
	    <div>
	      <p class="title">PSC监控软件</a></p>
	      <p>版本：V4.1.0（F6.30.C8.2E)</p>
	    </div>
	  </div>
	</el-dialog>
  </nav>
</template>
<script>
	import Cookies from 'js-cookie'
import screenfull from 'screenfull'
import UpdatePassword from './main-navbar-update-password'
import { clearLoginInfo } from '@/utils'
export default {
  inject: ['refresh'],
  data () {
    return {
      updatePasswordVisible: false,
      messageTip: false,
	  name:Cookies.get('systemname')?Cookies.get('systemname'):'',
	  time1:'',
	  time2:'',
	  ws:'',
	  ws1:'',
	  visible:false
    }
  },
  components: {
    UpdatePassword
  },
  mounted(){
	  setInterval(() => {
	  	this.getCurrentTime();
	  }, 1000);
  },
  methods: {
	  // 生成随机数
	  random(){
	      const _charStr = 'abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789';
	      const RandomIndex = (min, max, i) => {
	  		let index = Math.floor(Math.random() * (max - min + 1) + min),
	  			numStart = _charStr.length - 10;
	  		if (i == 0 && index >= numStart) {
	  			index = RandomIndex(min, max, i);
	  		}
	  		return index;
	      }
	  	const getRandomString = (length) => {
	  	    let min = 0, max = _charStr.length - 1, _str = '';
	  	        //判断是否指定长度，否则默认长度为15
	  	    length = length || 15;
	  	    //循环生成字符串
	  	    for (var i = 0, index; i < length; i++) {
	  	        index = RandomIndex(min, max, i);
	  	          _str += _charStr[index];
	  	    }
	  	        return _str;
	  	      }
	  	    const isJson = (str) => {
	  	        if (typeof str == 'string') {
	  	          try {
	  	            JSON.parse(str)
	  	            return true
	  	          } catch (e) {
	  	            return false
	  	          }
	  	        }
	  	    }
	  	   const id = getRandomString(18)
	  	   return id;
	  },
	  initWebSocket(path){
	     	let that = this;
	  	if("WebSocket" in window){
	  		if(that.ws){
	  			that.ws.close();
	  		}
	  		if(that.ws1){
	  			that.ws1.close();
	  		}
	  		if(path === '/home-index'|| path === '/relay-index'||path==='/setting-PEDCSetting'){	
	  			that.ws = new WebSocket(window.SITE_CONFIG['websoketURL']+'?uuid='+this.random());
	  			that.$globalWebSocket.setWs(that.ws);
	  		}else if(path === '/doorInfo/index' ){
	  			that.ws = new WebSocket(window.SITE_CONFIG['websoketURL']+'?uuid='+this.random());
	  			that.$globalWebSocket.setWs(that.ws);
	  			that.ws1 = new WebSocket(window.SITE_CONFIG['websoketDCUURL']+'?uuid='+this.random());
	  			that.$globalWebSocket.setWs(that.ws,that.ws1);
	  			
	  		}else if(path === '/oper-index'|| path === '/setting-sysParam'){
	  			that.ws1 = new WebSocket(window.SITE_CONFIG['websoketDCUURL']+'?uuid='+this.random());
	  			that.$globalWebSocket.setWs(that.ws,that.ws1);
	  		}
	  	}else{
	  		// 浏览器不支持 WebSocket
	  		console.log("您的浏览器不支持 WebSocket!");
	  	}	
	  },
	 getCurrentTime(){
		 let show_day = new Array(
		 	"星期日",
		 	"星期一",
		 	"星期二",
		 	"星期三",
		 	"星期四",
		 	"星期五",
		 	"星期六"
		 );
		 let time = new Date();
		 let year = time.getFullYear();
		 let month = time.getMonth() + 1;
		 let date = time.getDate();
		 let day = time.getDay();
		 let hour = time.getHours();
		 let minutes = time.getMinutes();
		 let second = time.getSeconds();
		 // month = month + 1;
		 hour < 10 ? (hour = "0" + hour) : hour;
		 minutes < 10 ? (minutes = "0" + minutes) : minutes;
		 second < 10 ? (second = "0" + second) : second;
		 this.time1 = year +"/" + month + "/" + date 
		 this.time2 = hour +":" +minutes + ":" +second ;
		 this.Mon =  show_day[day]
		 month < 10 ? (month = "0" + month) : month;
		 date < 10 ? (date = "0" + date) : date;
	 },
    // 全屏
    fullscreenHandle () {
      if (!screenfull.enabled) {
        return this.$message({
          message: this.$t('fullscreen.prompt'),
          type: 'warning',
          duration: 500
        })
      }
      screenfull.toggle()
    },
    // 修改密码
    updatePasswordHandle () {
      this.updatePasswordVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassword.init()
      })
    },
    // 退出
    logoutHandle () {
      this.$confirm(this.$t('prompt.info', { 'handle': this.$t('logout') }), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$http.post('/logout').then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          clearLoginInfo()
		  // 退出登录关闭websoket
		  this.$globalWebSocket.ws.onclose()
		  this.$globalWebSocket.ws1.onclose()
          this.$router.push({ name: 'login' })
        }).catch(() => {})
      }).catch(() => {})
    },
	version(){
		this.visible =true
	}
  }
}
</script>
<style scoped>
	.navbar-txt{
		color:  rgba(42, 130, 228, 1)!important;
		font-size:16px;
	}
	.aui-navbar--colorful .aui-navbar__menu .el-menu-item .el-dropdown>>>.navbar-arrow{
		color:#000!important;
	}
	.navbar-txt:hover{
		color:#000!important;
	}
	.aui-navbar--colorful .aui-navbar__menu > .el-menu-item:focus .navbar-txt, .aui-navbar--colorful .aui-navbar__menu > .el-menu-item:hover .navbar-txt, .aui-navbar--colorful .aui-navbar__menu > .el-submenu > .el-submenu__title:focus .navbar-txt, .aui-navbar--colorful .aui-navbar__menu > .el-submenu > .el-submenu__title:hover .navbar-txt{
		color:#000!important;
	}
	/* 文字滚动 */
	.merquee {
		height: 50px;
		line-height: 50px;
		box-sizing: border-box;
		word-break: break-all;
		white-space: nowrap;
		overflow: hidden;
	}
	.merquee-txt {
		display: inline-block;
		padding-left: 0%;
		/* 从右至左开始滚动 */
		animation: marqueeTransform 6s linear infinite;
	}
	@keyframes marqueeTransform {
		0% {
			transform: translate(0, 0);
		}
	 
		100% {
			transform: translate(-100%, 0);
		}
	}
	.about-dialog-main{
		display: flex;
		justify-content: center;
	}
	.title {
	  font-size: 16px;
	  font-weight: 600;
	  text-align: center;
	}
	::v-deep .el-dialog{
	       display: flex;
	       flex-direction: column;
	       margin:0 !important;
	       position:absolute;
	       top:50%;
	       left:50%;
	       transform:translate(-50%,-50%);
	       max-height:calc(100% - 30px);
	       max-width:calc(100% - 30px);
	   }
	  ::v-deep  .el-dialog .el-dialog__body{
	       flex:1;
	       overflow: auto;
	   }
</style>
